当前位置：首页 > 脚本编程 > CSS/HTML >

layui上传图片详解（附代码）

来源:互联网作者:网友投稿发布时间:2021-01-06 04:17

layui框架是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。本...

layui上传图片详解（附代码）

layui上传与bootstrap上传相似，只是不需要下插件，

layui自带的已够用先看一下前台界面，这里是用到的上传头像

先点击开始上传，头像上传至服务器中，

返回json添加至form表单中，与其他数据一起提交

先看一下jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>个人资料</title> <link href=https://www.php.cn/layui/"${pageContext.request.contextPath }/js/layui/css/layui.css" rel="stylesheet" /> <script src=https://www.php.cn/layui/"${pageContext.request.contextPath }/js/layui/layui.js" charset="utf-8"></script> <script src=https://www.php.cn/layui/"${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript"> layui.use('upload',function(){ var upload = layui.upload; upload.render({ elem: '#fileBtn' ,url: '../updatePersonalById.do' ,accept: 'file' ,auto: false ,bindAction: '#uploadBtn' ,done: function(res){ alert(res.data.src); $("[name=userImage]").val(res.data.src); } }); }); </script> </head> <body> <form class="layui-form" action="../updatePersonalByIdSuccess.do" method="post" charset="utf-8" target="_parent"> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">编号</label> <div class="layui-input-block"> <input type="text" name="userId" required lay-verify="required" value="${ui.userId }" autocomplete="off" readonly="readonly" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">登录名</label> <div class="layui-input-block"> <input type="text" name="userName" required lay-verify="required" value="${ui.userName }" autocomplete="off" readonly="readonly" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="userPwd" required lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">确认密码</label> <div class="layui-input-block"> <input type="password" name="reuserPwd" required lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">真实姓名</label> <div class="layui-input-block"> <input type="text" name="userrealName" required lay-verify="required" value="${ui.userrealName }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="text" name="userPhone" required lay-verify="required" value="${ui.userPhone }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="userAds" required lay-verify="required" value="${ui.userAds }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-upload"> <label class="layui-form-label">头像:</label> <div class="layui-upload layui-input-block"> <input type="hidden" name="userImage" value="${ui.userImage }" required lay-verify="required" /> <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon"></i>选择文件</button> <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <div class="layui-input-block"> <button class="layui-btn" id="btn1" lay-submit lay-filter="formDemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </body> </html>

与Controller交互的.do

package com.supermanager.controller; import java.io.File; import java.io.IOException; import java.util.Date; import java.util.List; import java.util.Random; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.supermanager.entity.LogsInfo; import com.supermanager.entity.RoleInfo; import com.supermanager.entity.StoragesInfo; import com.supermanager.entity.UserInfo; import com.supermanager.service.LogsService; import com.supermanager.service.RoleInfoService; import com.supermanager.service.StoragesService; import com.supermanager.service.UserInfoService; import net.sf.json.JSONArray; @Controller @Scope("prototype") public class UserInfoController { @Resource private UserInfoService userInfoService; @Resource private LogsService logService; @Resource private RoleInfoService roleInfoService; @Resource private StoragesService storagesService; /** * 修改个人资料 * @param session * @param file * @param ui * @return * @throws IOException * @throws IllegalStateException */ @RequestMapping(value="updatePersonalById") public @ResponseBody String updatePersonal(@RequestParam("file") MultipartFile file,@ModelAttribute UserInfo ui,HttpServletRequest request) throws IllegalStateException, IOException{ String oldName = file.getOriginalFilename(); String path = request.getServletContext().getRealPath("/upload/"); String fileName = changeName(oldName); String rappendix = "upload/" + fileName; fileName = path + "/" + fileName; File file1 = new File(fileName); file.transferTo(file1); String str = "{\"code\": 0,\"msg\": \"\",\"data\": {\"src\":\"" + rappendix + "\"}}"; return str; } public static String changeName(String oldName){ Random r = new Random(); Date d = new Date(); String newName = oldName.substring(oldName.indexOf('.')); newName = r.nextInt(99999999) + d.getTime() + newName; return newName; } @RequestMapping(value="updatePersonalByIdSuccess") public String updatePersonalByIdSuccess(@ModelAttribute UserInfo ui){ UserInfo uif = userInfoService.FindUserByUserId(ui.getUserId()); ui.setRoleId(uif.getRoleId()); ui.setUserSex(uif.getUserSex()); ui.setUserAge(uif.getUserAge()); int a = userInfoService.Update(ui); if(a!=0){ return "redirect:exitSystem.do"; } return "error"; } }

上传成功之后的效果如图

更多layui相关文章请关注layui使用教程栏目。

以上就是layui上传图片详解（附代码）的详细内容，更多请关注php中文网其它相关文章！

这里就是吐槽的IE6！）图片来	false)}//简化 document.getElementBy
content: $(#id) //这里content是一个	layui自界说滑滚动窗动画
利用layui框架封装ajax模块的详	layui兼容ie8中出现的问题 1、检
将这个文件给引入进去引入的	layuicode是默认通过寻找layui-c
该div包含layui-select-title和dl两个	让layui支持es5写法的方法介绍
layui框架中常见表单排版介绍	解决layUI导出到Excel时身份证号
在layui的layDate组件中添加设置	layui框架的table字段筛选功能介
html中图片怎么居中对齐？	css怎么让图片向左移动

CSS/HTML

layui上传图片详解（附代码）

相关文章

热门TAG

最新文章

热门文章